<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="cache-control" content="max-age=0" />
  <meta http-equiv="cache-control" content="no-cache" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="format-detection" content="telephone=yes" />
  <title>中国有瑜伽</title>
  <link rel="stylesheet" type="text/css" href="styles/reset.css">
  <link rel="stylesheet" type="text/css" href="styles/font.css">
  <link rel="stylesheet" type="text/css" href="styles/base.css">
  <link rel="stylesheet" type="text/css" href="styles/H5FullscreenPage.css">
  <link rel="stylesheet" type="text/css" href="styles/page-animation.css">
  <link rel="stylesheet" type="text/css" href="styles/kinerLottery.css">
  <link rel="stylesheet" type="text/css" href="styles/swiper-4.1.6.min.css">
  <style type="text/css">
    body {
      overflow: hidden;
    }

    canvas {
      opacity: 0.6;
      position: absolute;
    }

    .item {
      background-color: transparent;
    }

    .main-title {
      position: absolute;
      width: 20.34375rem;
      height: 17.65625rem;
      left: 50%;
      margin-left: -10.171875rem;
      top: 15%;
    }

    .index-bg {
      position: absolute;
      width: 17.75rem;
      height: 21.09375rem;
      left: 50%;
      margin-left: -8.875rem;
      top: 15%;
    }

    .part-title {
      position: absolute;
      top: 1.5625rem;
      left: 50%;
      margin-left: -8.84375rem;
    }

    .part-content {
      position: absolute;
      top: 12.625rem;
    }

    .title-img {
      width: 17.6875rem;
      height: 9.8125rem;
    }

    .title-txt {
      color: #4ce9fd;
      font-size: 2.125rem;
      font-weight: bold;
      width: 6.25rem;
      height: 6.25rem;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -3rem;
      margin-top: -3.125rem;
      letter-spacing: 0.3rem;
      text-align: center;
      line-height: 1.3;
    }

    .sub-title {
      color: #4ce9fd;
      font-size: 1.125rem;
      margin-top: 1rem;
    }

    .sm-font {
      font-size: 0.75rem;
    }

    .title-pos {
      margin-left: 1.5625rem;
      margin-top: 1rem;
    }

    .comn-txt {
      width: 100%;
      padding: 0 1.5625rem;
      box-sizing: border-box;
      color: #4ce9fd;
      font-size: 0.875rem;
      line-height: 1.8;
    }

    .indent-txt {
      text-indent: 0.875rem;
    }

    .map-img {
      width: 95%;
      margin: 0 2.5%;
      margin-top: -1rem;
    }

    .arrow-txt {
      width: 100%;
      position: absolute;
      color: #fff;
      bottom: 3.25rem;
      font-size: 1rem;
      text-align: center;
    }

    .swiper-container {
      width: 100vw;
      height: 16.5rem;
      margin-top: 0.5rem;
    }

    .swiper-slide {
      display: flex;
      display: -webkit-flex;
      flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      justify-content: center;
      -webkit-justify-content: center;
    }

    .pic-item {
      position: relative;
      width: 9.875rem;
      height: 7.5rem;
      border: 1px solid rgba(255, 255, 255, 0.5);
      background-color: rgba(119, 205, 255, 0.5);
      border-radius: 4px;
      box-sizing: border-box;
      margin: 0.3125rem;
      overflow: hidden;
    }

    .item-img {
      width: 75%;
      position: absolute;
      margin-left: -37.5%;
      left: 50%;
      z-index: 100;
    }

    .upload-input {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      opacity: .0;
      filter: alpha(opacity=0);
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    }

    .icon-close {
      font-size: 1rem;
      color: #727272;
      position: absolute;
      top: 0.3rem;
      right: 0.3rem;
      display: none;
      z-index: 110;
    }

    .small-part {
      transform: scale(0.8);
      -webkit-transform: scale(0.8);
    }

    .icon-triangle {
      position: absolute;
      bottom: 3rem;
      left: 50%;
      font-size: 1.1875rem;
      margin-left: -0.59375rem;
      color: #e5ca20;
      z-index: -1;
    }

    .sm-title {
      font-size: 1.125rem;
      color: #e5ca20;
    }

    .form-wrap {
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      -webkit-flex-direction: column;
      align-items: center;
      -webkit-align-items: center;
      width: 100%;
    }

    .form-block {
      width: 78.67%;
      color: #4ce9fd;
    }

    .input-wrap {
      border: 1px solid #4ce9fd;
      box-sizing: border-box;
      height: 2.1875rem;
      margin-bottom: 0.625rem;
      border-radius: 0.3125rem;
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      -webkit-justify-content: space-between;
      align-items: center;
      -webkit-align-items: center;
      position: relative;
    }

    .input-wrap .iconfont {
      font-size: 1.1875rem;
      color: #4ce9fd;
      margin-left: 0.5rem;
    }

    .select-block {
      outline: none;
      height: 2.06255rem;
      font-size: 0.9375rem;
      flex: 1;
      -webkit-flex: 1;
      margin: 0 0.625rem;
      color: #fff;
    }

    .input-content {
      flex: 1;
      -webkit-flex: 1;
      height: 1.875rem;
      line-height: 1.875rem;
      font-size: 0.9375rem;
      margin: 0 0.625rem;
      color: #fff;
    }

    .input-content::-webkit-input-placeholder {
      font-size: 0.875rem;
      color: #4ce9fd;
    }

    .comn-font {
      font-size: 0.875rem;
      color: #4ce9fd;
    }

    .icon-arrow {
      position: absolute;
      top: 50%;
      margin-top: -0.59375rem;
      right: 0.5rem;
      z-index: -1;
    }

    .code-btn {
      background-color: rgba(119, 205, 255, 0.5);
      border-radius: 0.3125rem;
      color: #fff;
      font-size: 0.8125rem;
      padding: 0.2rem 0.4rem;
      position: absolute;
      right: 0.5rem;
      top: 50%;
      margin-top: -0.76rem;
    }

    .common-btn {
      height: 2.8125rem;
      line-height: 2.8125rem;
      background: #4ce9fd;
      border-radius: 0.3125rem;
      color: #fff;
      font-size: 1rem;
      text-align: center;
    }

    .large-btn {
      width: 18.4375rem;
      margin: 0.5rem auto;
    }

    .middle-btn {
      width: 14.375rem;
      margin: 1.25rem auto;
    }

    .abs-btn {
      position: absolute;
      left: 50%;
      margin-left: -7.1875rem;
      bottom: -8rem;
    }

    .topic-font {
      font-size: 0.875rem;
      line-height: 1.8;
    }

    .topic-label {
      display: inline-block;
    }

    .topic-radio {
      display: none
    }

    .topic-radioInput {
      background-color: transparent;
      border: 1px solid #4ce9fd;
      border-radius: 100%;
      display: inline-block;
      height: 14px;
      margin-right: 0.3rem;
      vertical-align: middle;
      width: 14px;
      line-height: 1;
      box-sizing: border-box;
    }

    .topic-radio:checked+.topic-radioInput:after {
      background-color: #e5ca20;
      border-radius: 100%;
      content: "";
      display: inline-block;
      height: 8px;
      margin: 2px;
      width: 8px;
    }

    .flex-option {
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      -webkit-justify-content: space-between;
    }

    .col-option {
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      -webkit-flex-direction: column;
    }

    .topic-li {
      margin-bottom: 0.5rem;
    }

    .swiper-button-next,
    .swiper-container-rtl .swiper-button-prev {
      right: 0;
    }

    .swiper-button-prev,
    .swiper-container-rtl .swiper-button-next {
      left: 0;
    }

    .swiper-button-prev,
    .swiper-button-next {
      background-size: 50%;
    }

    .preBlock {
      width: 100%;
      height: 100%;
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      -webkit-justify-content: center;
      align-items: center;
      -webkit-align-items: center;
    }

    .preview {
      height: auto;
      max-width: 100%;
    }

    .sm-btn {
      position: absolute;
      width: 4.375rem;
      height: 2.1875rem;
      font-size: 0.875rem;
      line-height: 2.1875rem;
      right: 1.5625rem;
      top: 1.5rem;
    }

    .yellow-color {
      color: #e5ca20;
    }

    .txt-top {
      margin-top: 1rem;
    }

    .mask {
      position: fixed;
      z-index: 1000;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background: rgba(0, 0, 0, 0.5);
      opacity: 1;
      justify-content: center;
      -webkit-justify-content: center;
      align-items: center;
      -webkit-align-items: center;
      display: none;
    }

    .mask-show {
      display: flex;
      display: -webkit-flex;
    }

    .dialog-warp {
      width: 68%;
      padding: 1.25rem 1.875rem;
      background: #fff;
      border-radius: 0.3125rem;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      -webkit-flex-direction: column;
      align-items: center;
      -webkit-align-items: center;
      position: relative;
      box-sizing: border-box;
    }

    .dialog-title {
      color: #4ce9fd;
      font-size: 1.4375rem;
    }

    .dialog-content {
      font-size: 0.9375rem;
      line-height: 1.5;
      margin-top: 1.25rem;
    }

    .line-btn {
      width: 100%;
      height: 2.1875rem;
      color: #4ce9fd;
      border: 1px solid;
      font-size: 1rem;
      margin-top: 0.9375rem;
      background-color: #fff;
      border-radius: 0.3125rem;
    }
    .red-content{
      color: crimson;
    }
  </style>
</head>

<body class="H5FullscreenPage">
  <canvas id="canvas"></canvas>
  <div class="H5FullscreenPage-wrap">
    <div class="item item1">
      <img src="http://cdn.50yoga.cn/pics/public/sweet/images/chinaYoga/logo-bg.png" class="index-bg">
      <img src="http://cdn.50yoga.cn/pics/public/sweet/images/chinaYoga/logo.png" data-delay="1000" class="fadeIn main-title"> </div>
    <div class="item item2">
      <div class="part part-title fadeSlow" data-delay="500">
        <img src="http://cdn.50yoga.cn/pics/public/sweet/images/chinaYoga/title.png" class="title-img">
        <h2 class="title-txt">活动简介</h2>
      </div>
      <div class="part part-content comn-txt fadeSlow" data-delay="1000">
        <p class="indent-txt">《中国有瑜伽》是国内首档瑜伽进阶记录型真人秀节目，我们的目的是将瑜伽作为更时尚，更健康的全民运动进行推广，追求High life，引领更有格调的生活潮流。</p>
        <p>来这里，做主角！我们需要瑜伽星人，需要你鼓起勇气，做自己人生的主角，做时尚健康生活的引领者！</p>
        <p class="sub-title yellow-color">福利干货</p>
        <p>《年度冠军超值组合套餐》
          <br>
          <li>百万创业基金--帮助优胜选手瑜伽"事业化"</li>
          <li>提供出国游学机会--促成瑜伽"教育化"</li>
          <li>"最美瑜伽馆主"代言--提高个人行业知名度</li>
          <li>权威平台封面人物--打造个人专业公信力</li>
        </p>
      </div>
    </div>
    <div class="item item3">
      <div class="part part-title fadeSlow" data-delay="500">
        <img src="http://cdn.50yoga.cn/pics/public/sweet/images/chinaYoga/title.png" class="title-img">
        <h2 class="title-txt">报名要求</h2>
      </div>
      <div class="part part-content comn-txt fadeSlow" data-delay="1000">
        <p>①不限性别，不限年龄，这里没有条条框框，只要你热爱瑜伽，就是同道中人！</p>
        <p>②数百种瑜伽体式，只要你能完成3个就是我们需要的瑜伽星人！</p>
        <p class="yellow-color txt-top">报名截止日期：</p>
        <p>武汉赛区：4月16日
          <br> (成都、苏州、深圳、北京四个赛区的报名时间请关注后续更新）
          <br>报名即有机会赢取惊喜礼品，比赛期间更是福利多多，期待你的参与。 </p>
      </div>
    </div>
    <div class="item item4">
      <div class="part part-title fadeSlow" data-delay="500">
        <img src="http://cdn.50yoga.cn/pics/public/sweet/images/chinaYoga/title.png" class="title-img">
        <h2 class="title-txt">举办城市</h2>
      </div>
      <div class="part part-content fadeSlow" data-delay="1000">
        <img src="http://cdn.50yoga.cn/pics/public/sweet/images/chinaYoga/map.png" class="map-img"> </div>
      <div class="arrow-txt">我要参赛</div>
    </div>
    <div class="item item5">
      <div class="part part-title fadeSlow" data-delay="500">
        <img src="http://cdn.50yoga.cn/pics/public/sweet/images/chinaYoga/title.png" class="title-img">
        <h2 class="title-txt">报名参加</h2>
      </div>
      <div class="part part-content fadeSlow" data-delay="1000">
        <p class="title-pos comn-font">点击上传相应的体式美照（至少3张）</p>
        <div class="swiper-container">
          <ul class="swiper-wrapper">
            <li class="swiper-slide">
              <div class="pic-item">
                <img src="http://cdn.50yoga.cn/pics/public/sweet/images/chinaYoga/form01.png" class="item-img addImg" onclick="clickImg(this)">
                <input type="file" class="upload-input" onchange="change(this)">
                <div class="preBlock">
                  <img class="preview" id="preview" alt="" name="pic"> </div>
                <i class="iconfont icon-close delete" onclick="deleteImg(this)"></i>
              </div>
              <div class="pic-item">
                <img src="http://cdn.50yoga.cn/pics/public/sweet/images/chinaYoga/form02.png" class="item-img addImg" onclick="clickImg(this)">
                <input type="file" class="upload-input" onchange="change(this)">
                <div class="preBlock">
                  <img class="preview" id="preview" alt="" name="pic"> </div>
                <i class="iconfont icon-close delete" onclick="deleteImg(this)"></i>
              </div>
              <div class="pic-item">
                <img src="http://cdn.50yoga.cn/pics/public/sweet/images/chinaYoga/form03.png" class="item-img addImg" onclick="clickImg(this)">
                <input type="file" class="upload-input" onchange="change(this)">
                <div class="preBlock">
                  <img class="preview" id="preview" alt="" name="pic"> </div>
                <i class="iconfont icon-close delete" onclick="deleteImg(this)"></i>
              </div>
              <div class="pic-item">
                <img src="http://cdn.50yoga.cn/pics/public/sweet/images/chinaYoga/form04.png" class="item-img addImg" onclick="clickImg(this)">
                <input type="file" class="upload-input" onchange="change(this)">
                <div class="preBlock">
                  <img class="preview" id="preview" alt="" name="pic"> </div>
                <i class="iconfont icon-close delete" onclick="deleteImg(this)"></i>
              </div>
            </li>
            <li class="swiper-slide">
              <div class="pic-item">
                <img src="http://cdn.50yoga.cn/pics/public/sweet/images/chinaYoga/form05.png" class="item-img addImg" onclick="clickImg(this)">
                <input type="file" class="upload-input" onchange="change(this)">
                <div class="preBlock">
                  <img class="preview" id="preview" alt="" name="pic"> </div>
                <i class="iconfont icon-close delete" onclick="deleteImg(this)"></i>
              </div>
              <div class="pic-item">
                <img src="http://cdn.50yoga.cn/pics/public/sweet/images/chinaYoga/form06.png" class="item-img addImg" onclick="clickImg(this)">
                <input type="file" class="upload-input" onchange="change(this)">
                <div class="preBlock">
                  <img class="preview" id="preview" alt="" name="pic"> </div>
                <i class="iconfont icon-close delete" onclick="deleteImg(this)"></i>
              </div>
              <div class="pic-item">
                <img src="http://cdn.50yoga.cn/pics/public/sweet/images/chinaYoga/form07.png" class="item-img addImg" onclick="clickImg(this)">
                <input type="file" class="upload-input" onchange="change(this)">
                <div class="preBlock">
                  <img class="preview" id="preview" alt="" name="pic"> </div>
                <i class="iconfont icon-close delete" onclick="deleteImg(this)"></i>
              </div>
              <div class="pic-item">
                <img src="http://cdn.50yoga.cn/pics/public/sweet/images/chinaYoga/form08.png" class="item-img addImg" onclick="clickImg(this)">
                <input type="file" class="upload-input" onchange="change(this)">
                <div class="preBlock">
                  <img class="preview" id="preview" alt="" name="pic"> </div>
                <i class="iconfont icon-close delete" onclick="deleteImg(this)"></i>
              </div>
            </li>
            <li class="swiper-slide">
              <div class="pic-item">
                <img src="http://cdn.50yoga.cn/pics/public/sweet/images/chinaYoga/form09.png" class="item-img addImg" onclick="clickImg(this)">
                <input type="file" class="upload-input" onchange="change(this)">
                <div class="preBlock">
                  <img class="preview" id="preview" alt="" name="pic"> </div>
                <i class="iconfont icon-close delete" onclick="deleteImg(this)"></i>
              </div>
              <div class="pic-item">
                <img src="http://cdn.50yoga.cn/pics/public/sweet/images/chinaYoga/form10.png" class="item-img addImg" onclick="clickImg(this)">
                <input type="file" class="upload-input" onchange="change(this)">
                <div class="preBlock">
                  <img class="preview" id="preview" alt="" name="pic"> </div>
                <i class="iconfont icon-close delete" onclick="deleteImg(this)"></i>
              </div>
              <div class="pic-item">
                <img src="http://cdn.50yoga.cn/pics/public/sweet/images/chinaYoga/form11.png" class="item-img addImg" onclick="clickImg(this)">
                <input type="file" class="upload-input" onchange="change(this)">
                <div class="preBlock">
                  <img class="preview" id="preview" alt="" name="pic"> </div>
                <i class="iconfont icon-close delete" onclick="deleteImg(this)"></i>
              </div>
              <div class="pic-item">
                <img src="http://cdn.50yoga.cn/pics/public/sweet/images/chinaYoga/form12.png" class="item-img addImg" onclick="clickImg(this)">
                <input type="file" class="upload-input" onchange="change(this)">
                <div class="preBlock">
                  <img class="preview" id="preview" alt="" name="pic"> </div>
                <i class="iconfont icon-close delete" onclick="deleteImg(this)"></i>
              </div>
            </li>
          </ul>
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
      </div>
    </div>
    <div class="item item6">
      <div class="part part-title fadeSmall small-part" data-delay="500">
        <img src="http://cdn.50yoga.cn/pics/public/sweet/images/chinaYoga/title.png" class="title-img">
        <select class="clear-select title-txt sm-title" id="city">
          <option value="武汉赛区" selected>武汉赛区</option>
        </select>
        <i class="iconfont icon-triangle"></i>
      </div>
      <div class="part form-wrap part-content fadeSlow" data-delay="1000">
        <form class="form-block">
          <div class="input-wrap">
            <i class="iconfont icon-user"></i>
            <input class="input-content clear-input" placeholder="请输入姓名" required id="name"> </div>
          <div class="input-wrap">
            <i class="iconfont icon-sex"></i>
            <select class="select-block clear-select" id="city">
              <option value="女" selected>女</option>
            </select>
            <i class="iconfont icon-arrow"></i>
          </div>
          <div class="input-wrap">
            <i class="iconfont icon-old"></i>
            <input class="input-content clear-input" placeholder="请输入年龄" required id="old"> </div>
          <div class="input-wrap">
            <i class="iconfont icon-mobile"></i>
            <input class="input-content clear-input" placeholder="请输入手机号" required id="phone"> </div>
          <div class="input-wrap">
            <i class="iconfont icon-code"></i>
            <input class="input-content clear-input" placeholder="请输入验证码" required id="code">
            <button class="code-btn clear-btn" type="button" onclick="showPop(this)">获取验证码</button>
          </div>
          <button class="clear-btn common-btn large-btn" type="submit" onclick="showPop(this)">确认报名</button>
        </form>
      </div>
    </div>
    <div class="item item7">
      <div class="part part-title fadeSlow" data-delay="500">
        <img src="http://cdn.50yoga.cn/pics/public/sweet/images/chinaYoga/title.png" class="title-img">
        <h2 class="title-txt">快捷报名</h2>
      </div>
      <div class="part part-content comn-txt fadeSlow" data-delay="1000">
        <p>
          <span style="font-size:1.125rem;">导演组公开走后门了！</span>如果有故事的你或身边小伙伴，和瑜伽有不可说的秘密，请即刻爆料，报名即有机会参与抽奖。</p>
        <p class="yellow-color">报名电话：021-2564111</p>
      </div>
    </div>
    <div class="item item8">
      <div class="part part-title fadeSlow" data-delay="500">
        <img src="http://cdn.50yoga.cn/pics/public/sweet/images/chinaYoga/title.png" class="title-img">
        <h2 class="title-txt">趣味调查</h2>
      </div>
      <div class="part form-wrap part-content" data-delay="1000">
        <form class="form-block fadeSlow">
          <ul class="topic-font">
            <li class="topic-li">
              <p>男女更衣室你会选择哪个?</p>
              <div class="flex-option">
                <label class="topic-label">
                  <input class="topic-radio" type="radio" name="topic01">
                  <span class="topic-radioInput"></span>男更衣室</label>
                <label class="topic-label">
                  <input class="topic-radio" type="radio" name="topic01">
                  <span class="topic-radioInput"></span>女更衣室</label>
                <label class="topic-label">
                  <input class="topic-radio" type="radio" name="topic01">
                  <span class="topic-radioInput"></span>看情况</label>
              </div>
            </li>
            <li class="topic-li">
              <p>你修炼的段位?</p>
              <div class="flex-option">
                <label class="topic-label">
                  <input class="topic-radio" type="radio" name="topic02">
                  <span class="topic-radioInput"></span>瑜伽大神</label>
                <label class="topic-label">
                  <input class="topic-radio" type="radio" name="topic02">
                  <span class="topic-radioInput"></span>瑜伽小白</label>
                <label class="topic-label">
                  <input class="topic-radio" type="radio" name="topic02">
                  <span class="topic-radioInput"></span>什么是瑜伽</label>
              </div>
            </li>
            <li class="topic-li">
              <p>你认为小仙女的必备技能?</p>
              <div class="col-option">
                <label class="topic-label">
                  <input class="topic-radio" type="radio" name="topic03">
                  <span class="topic-radioInput"></span>歌声技压全场</label>
                <label class="topic-label">
                  <input class="topic-radio" type="radio" name="topic03">
                  <span class="topic-radioInput"></span>折叠自己</label>
                <label class="topic-label">
                  <input class="topic-radio" type="radio" name="topic03">
                  <span class="topic-radioInput"></span>旋转跳跃飞檐走壁</label>
              </div>
            </li>
            <li class="topic-li">
              <p>你的瑜伽大招风格属性?</p>
              <div class="col-option">
                <label class="topic-label">
                  <input class="topic-radio" type="radio" name="topic04">
                  <span class="topic-radioInput"></span>牺牲自己拯救全人类（奉献型）</label>
                <label class="topic-label">
                  <input class="topic-radio" type="radio" name="topic04">
                  <span class="topic-radioInput"></span>一出手就是全场MVP（抢眼型）</label>
                <label class="topic-label">
                  <input class="topic-radio" type="radio" name="topic04">
                  <span class="topic-radioInput"></span>修身养性飞升上仙（低调型）</label>
              </div>
            </li>
          </ul>
          <button class="clear-btn common-btn large-btn" type="submit">提交</button>
        </form>
      </div>
    </div>
    <div class="item item9">
      <div class="part part-title fadeSlow fadeSlow" data-delay="500">
        <img src="http://cdn.50yoga.cn/pics/public/sweet/images/chinaYoga/title.png" class="title-img">
        <h2 class="title-txt">幸运抽奖</h2>
      </div>
      <div id="box" class="part box fadeSlow" data-delay="1000">
        <div class="outer KinerLottery KinerLotteryContent">
          <img src="http://cdn.50yoga.cn/pics/public/sweet/images/chinaYoga/rotate-bg.png"> </div>
        <!-- 大专盘分为三种状态：活动未开始（no-start）、活动进行中(start)、活动结束(completed),js根据这3个class进行匹配状态 -->
        <div class="inner KinerLotteryBtn start"></div>
        <button class="clear-btn common-btn middle-btn abs-btn KinerLotteryBtn start">转起来！</button>
      </div>
    </div>
    <div class="mask" id="apply">
      <div class="dialog-warp slideDown">
        <p class="dialog-title">报名成功</p>
        <p class="dialog-content">后面的内容更加精彩，
          <br>更有抽奖豪礼等着你！</p>
        <button class="clear-btn line-btn" onclick="hidePop(this)">继续浏览</button>
      </div>
    </div>
    <div class="mask" id="lottery">
      <div class="dialog-warp slideDown">
        <p class="dialog-title">恭喜您</p>
        <p class="dialog-content">获得<span class="red-content" id="prize">瑜伽馆一小时电子体验券</span>
          <br>详情将短信告知！</p>
        <button class="clear-btn line-btn" onclick="hidePop(this)">确定</button>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="js/zepto.min.js"></script>
  <script type="text/javascript" src="js/kinerLottery.js"></script>
  <script type="text/javascript" src="js/H5FullscreenPage.js"></script>
  <script type="text/javascript" src="js/swiper-4.1.6.min.js"></script>
  <script type="text/javascript">
    "use strict";
    var showPop = function (obj) {
      $(obj).parent().parent().parents().find("#apply").addClass("mask-show");
    }
    var hidePop = function (obj) {
      $(obj).parent().parent().removeClass("mask-show");
    }
    // 报名传照片轮播配置
    var mySwiper = new Swiper('.swiper-container', {
      loop: false,
      observer: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
    })
    //点击
    var clickImg = function (obj) {
      $(obj).parent().find('.upload-input').click();
    }
    //删除
    var deleteImg = function (obj) {
      $(obj).parent().find('input').val('');
      $(obj).parent().find('img.preview').attr("src", "");
      //IE9以下
      $(obj).parent().find('img.preview').css("filter", "");
      $(obj).hide();
      $(obj).parent().find('.addImg').show();
    }
    //选择图片
    function change(file) {
      console.log(file);
      //预览
      var pic = $(file).parent().find(".preview");
      //添加按钮
      var addImg = $(file).parent().find(".addImg");
      //删除按钮
      var deleteImg = $(file).parent().find(".delete");

      var ext = file.value.substring(file.value.lastIndexOf(".") + 1).toLowerCase();

      // gif在IE浏览器暂时无法显示
      if (ext != 'png' && ext != 'jpg' && ext != 'jpeg') {
        if (ext != '') {
          alert("图片的格式必须为png或者jpg或者jpeg格式！");
        }
        return;
      }
      //判断IE版本
      var isIE = navigator.userAgent.match(/MSIE/) != null,
        isIE6 = navigator.userAgent.match(/MSIE 6.0/) != null,
        isIE10 = navigator.userAgent.match(/MSIE 10.0/) != null;
      if (isIE && !isIE10) {
        file.select();
        var reallocalpath = document.selection.createRange().text;
        // IE6浏览器设置img的src为本地路径可以直接显示图片
        if (isIE6) {
          pic.attr("src", reallocalpath);
        } else {
          // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现             
          pic.css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + reallocalpath + "\")");
          // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
          pic.attr('src', '');
        }
        addImg.hide();
        deleteImg.show();
      } else {
        html5Reader(file, pic, addImg, deleteImg);
      }
    }
    //H5渲染
    function html5Reader(file, pic, addImg, deleteImg) {
      var file = file.files[0];
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function (e) {
        pic.attr("src", this.result);
      }
      addImg.hide();
      deleteImg.show();
    }
    // 全屏滚动配置   
    H5FullscreenPage.init({
      'type': 1,
      'pageShow': function (dom) { },
      'pageHide': function (dom) { },
      'useMusic': null
    });
    // canvas星空背景
    var canvas = document.getElementById('canvas'),
      ctx = canvas.getContext('2d'),
      w = canvas.width = window.innerWidth,
      h = canvas.height = window.innerHeight,
      hue = 217,
      stars = [],
      count = 0,
      maxStars = 3000;//星星数量 

    var canvas2 = document.createElement('canvas'),
      ctx2 = canvas2.getContext('2d');
    canvas2.width = 100;
    canvas2.height = 100;
    var half = canvas2.width / 2,
      gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
    gradient2.addColorStop(0.025, '#fff');
    gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
    gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
    gradient2.addColorStop(1, 'transparent');

    ctx2.fillStyle = gradient2;
    ctx2.beginPath();
    ctx2.arc(half, half, half, 0, Math.PI * 2);
    ctx2.fill();

    // End cache

    function random(min, max) {
      if (arguments.length < 2) {
        max = min;
        min = 0;
      }

      if (min > max) {
        var hold = max;
        max = min;
        min = hold;
      }

      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function maxOrbit(x, y) {
      var max = Math.max(x, y),
        diameter = Math.round(Math.sqrt(max * max + max * max));
      return diameter / 2;
      //星星移动范围，值越大范围越小
    }

    var Star = function () {

      this.orbitRadius = random(maxOrbit(w, h));
      this.radius = random(60, this.orbitRadius) / 12;
      //星星大小
      this.orbitX = w / 2;
      this.orbitY = h / 2;
      this.timePassed = random(0, maxStars);
      this.speed = random(this.orbitRadius) / 900000;
      //星星移动速度 
      this.alpha = random(2, 10) / 10;

      count++;
      stars[count] = this;
    }

    Star.prototype.draw = function () {
      var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
        y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
        twinkle = random(10);

      if (twinkle === 1 && this.alpha > 0) {
        this.alpha -= 0.05;
      } else if (twinkle === 2 && this.alpha < 1) {
        this.alpha += 0.05;
      }

      ctx.globalAlpha = this.alpha;
      ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
      this.timePassed += this.speed;
    }

    for (var i = 0; i < maxStars; i++) {
      new Star();
    }

    function animation() {
      ctx.globalCompositeOperation = 'source-over';
      ctx.globalAlpha = 0.8;//尾巴
      ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
      ctx.fillRect(0, 0, w, h)

      ctx.globalCompositeOperation = 'lighter';
      for (var i = 1, l = stars.length; i < l; i++) {
        stars[i].draw();
      };

      window.requestAnimationFrame(animation);
    }

    animation();
  </script>
  <script>
    /**
     * 根据转盘旋转角度判断获得什么奖品
     * @param deg
     * @returns {*}
     */
    var whichAward = function (deg) {

      if ((deg > 0 && deg <= 60)) {
        return "隐瑜伽会员折扣券";
      } else if ((deg > 60 && deg <= 120)) {
        return "瑜伽馆一小时电子体验券";
      } else if ((deg > 120 && deg <= 180)) {
        return "隐瑜伽会员折扣券";
      } else if ((deg > 180 && deg <= 240)) {
        return "瑜伽馆一小时电子体验券";
      } else if ((deg > 240 && deg <= 300)) {
        return "隐瑜伽会员折扣券";
      } else if ((deg > 300 && deg <= 360) || (deg == 0)) {
        return "瑜伽馆一小时电子体验券";
      }
    }


    var KinerLottery = new KinerLottery({
      rotateNum: 8, //转盘转动圈数
      body: "#box", //大转盘整体的选择符或zepto对象
      direction: 0, //0为顺时针转动,1为逆时针转动

      disabledHandler: function (key) {

        switch (key) {
          case "noStart":
            alert("活动尚未开始");
            break;
          case "completed":
            alert("活动已结束");
            break;
        }

      }, //禁止抽奖时回调

      clickCallback: function () {

        //此处访问接口获取奖品
        function random() {
          return Math.floor(Math.random() * 360);
        }


        this.goKinerLottery(random());

      }, //点击抽奖按钮,再次回调中实现访问后台获取抽奖结果,拿到抽奖结果后显示抽奖画面

      KinerLotteryHandler: function (deg) {
        $("#lottery").addClass("mask-show");
        $("#prize").text(whichAward(deg));
      } //抽奖结束回调
    });
  </script> </body>

</html>